<template>
  <div class="tabbar">
    <router-link tag="div" class="item" to="/recommend">
      <span>推荐</span>
    </router-link>
    <router-link tag="div" class="item" to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link tag="div" class="item" to="/rank">
      <span>排行</span>
    </router-link>
    <router-link tag="div" class="item" to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Tabbar'
}
</script>

<style scoped lang="scss">
  @import "../assets/css/variable";
  @import "../assets/css/mixin";
  .tabbar{
    width: 100%;
    height: 84px;
  @include bg_sub_color();
    display: flex;
    justify-content: space-around;
  /*position: relative;*/
  /*z-index: 999;*/
  .item{
  span{
    line-height: 84px;
  @include font_size($font_medium);
  @include font_color();
  }
  &.router-link-active{
  span{
  @include font_active_color();
  }
  border-bottom: 5px solid #000;
  @include border_color();
  }
  }
  }
</style>
